<template>
  <div class="container">
    <!-- 我的 头部-->
    <div class="header background padding-24 space-between">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="title">{{title}}</div>
      <div class="h-right">
        <img :src="play" alt />
      </div>
    </div>
    <!-- 购买列表 -->
    <div class="buy-list">
      <div class="item" v-for="(item,index) in payList" :key="index">
        <div class="top">
          <div class="left fs-28">{{item.add_time}}</div>
          <div class="right fs-28">￥{{item.all_price}}</div>
        </div>
        <div class="bottom fs-28">
          {{item.audition_activity_name}} 购买
          <span class="num">{{item.flower_num}}</span> 支鲜花
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "buy-detail",
  data() {
    return {
      title: "购买明细",
      back: require("@/assets/index/back-mine.png"),
      play: require("@/assets/index/play-mine.png"),
      payList: []
    };
  },
  components: {},
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 获取购买记录数据
    getBuyDetail(){
      const url = this.$host1 + `home/audition/AuditionBuyRecords`;
      this.$axios.get(url).then(res=>{
        console.log(res.data,'---res.data--');
      if(res.data.code == 200){
        this.payList = res.data.data.list;
      }else{
        this.AlertWin(res.data.message);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    }
  },
  created() {
    this.getBuyDetail();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100vh;
  padding-top: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  // 头部样式设置
  .header {
    background-color: #f8f8f8;
    .h-back {
      width: 0.15rem;
      height: 0.26rem;
      img {
        width: 100%;
      }
    }
    .title {
      font-size: 0.36rem;
      font-weight: bold;
      color: #444444;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      img {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .buy-list {
    padding: 0.38rem 0.24rem 0;
    box-sizing: border-box;
    background-color: #fff;
    .item {
      border-bottom: 0.01rem solid #e9e9e9;
      padding-bottom: 0.31rem;
      box-sizing: border-box;
      margin-bottom: 0.35rem;
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.31rem;
        .left {
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }
        .right {
          font-weight: bold;
          color: rgba(244, 67, 73, 1);
        }
      }
      .bottom {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        .num{
          color: #F44349;
        }
      }
    }
  }
}
</style>
